import React, { Suspense } from 'react';
// import Login from '../views/login'
// import Layout from '../views/layout'
import { HashRouter, BrowserRouter, Link, NavLink, Route, Switch, withRouter } from 'react-router-dom'
// import { loadable } from '../util'
const Login = React.lazy(() => import(/*webpackChunkName:"login"*/'../views/login'))
const Layout = React.lazy(() => import(/*webpackChunkName:"layout"*/'../views/layout'))
/* 
  react路由有个问题就是 即使上边有匹配的路由  下边的Route仍然会查看
  想要避免这个问题的化 需要使用  Switch组件套起来
  编程式导航：  只要是Route渲染出来的组件  都会有路由传递的属性 history
              若不是Route渲染出来的 还想使用 history
                那么 把那个组件 使用 withRouter处理


  react 内置 异步组件 React.lazy +        Suspense       


*/
function Loading() {
  return <h1>loading</h1>
}
// let f = () => import(/*webpackChunkName:"login"*/'../views/login')
// f().then(data => {
//   console.log(data)
// })

// const Login = loadable({
//   loader: () => import(/*webpackChunkName:"login"*/'../views/login'),
//   loading: Loading
// })
// const Layout = loadable({
//   loader: () => import(/*webpackChunkName:"layout"*/'../views/layout'),
//   loading: Loading
// })

class App extends React.Component {
  render() {
    return <Suspense fallback={<Loading />}>
      <HashRouter>
        <Switch>
          <Route path='/login' component={Login}></Route>
          <Route path='/404' render={() => <h1>404</h1>}></Route>
          <Route path='/' component={Layout}></Route>
        </Switch>
      </HashRouter>
    </Suspense>;
  }
}
export default App